<template>
  <div>
    <div style="margin-left:20px;margin-right:20px;margin-top:10px;">
      <el-tabs type="border-card" v-model="activeName">
       <el-tab-pane name="first">
       <span slot="label" id="tab1">服务器信息</span>
        <div style="margin-bottom:10px;"><el-button size="small" plain type="primary" class="el-icon-refresh" @click="loadData1">立即更新</el-button> </div>
        <div style="margin-bottom:10px;text-align:center;font-weight:bold;font-size:21px;">服务器信息</div>
        <div style="margin-bottom:10px;"><span class="title"> 上次更新时间：</span>{{serverMonitorInfo.lastUpdateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</div>
        <div style="margin-bottom:10px;"><span class="title">CPU数量：</span>{{serverMonitorInfo.cpuCount}}</div>
        <div style="margin-bottom:10px;"><span class="title">服务器CPU使用率：</span>{{serverMonitorInfo.cpuUsage}}%</div>
        <div style="margin-bottom:10px;"><span class="title">应用最新启动时间点：</span>{{serverMonitorInfo.lastStartTime | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
        <div style="margin-bottom:30px;"><span class="title">应用最新一次已运行时间(秒)：</span>{{serverMonitorInfo.lastUptime}}</div>

        <div style="margin-bottom:10px;text-align:center;font-weight:bold;font-size:21px;">存储信息</div>
        <div style="margin-bottom:10px;"><span class="title">内存总量(MB)：</span>{{serverMonitorInfo.totalRAM}}</div>
        <div style="margin-bottom:10px;"><span class="title">内存已用大小(MB)：
            </span>{{serverMonitorInfo.usedRAM}}
        </div>
        <el-progress type="circle" :percentage="serverMonitorInfo.usedRAMPercent"></el-progress>
        <div style="margin-bottom:10px;" v-for="(obj,index) in serverMonitorInfo.harddiskInfoList" :key="index">
            <div>盘符：{{obj.driveLetter}}</div>
            <div>总容量(MB)：{{obj.total}}</div>
            <div>已用容量(MB)：{{obj.used}}</div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
      <span slot="label" id="tab2">JVM信息</span>
        <div style="margin-bottom:10px;"><el-button size="small" plain type="primary" class="el-icon-refresh" @click="loadData2">立即更新</el-button> </div>
        <div style="margin-bottom:10px;text-align:center;font-weight:bold;font-size:21px;">JVM信息</div>
        <div style="margin-bottom:10px;"><span class="title"> 上次更新时间：</span>{{JVMInfo.lastUpdateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM总线程数：</span>{{JVMInfo.threadsTotal}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM当前活跃线程数量：</span>{{JVMInfo.threadsLive}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM守护线程数量：</span>{{JVMInfo.threadsDaemon}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM峰值线程数量：</span>{{JVMInfo.threadsPeak}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM已加载Class数量：</span>{{JVMInfo.clsCurrLoaded}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM未加载Class数量：</span>{{JVMInfo.clsUnloaded}}</div>
        <div style="margin-bottom:10px;"><span class="title">JVM总加载Class数量：</span>{{JVMInfo.clsTotalLoaded}}</div>
      </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
        activeName: 'first',
        serverMonitorInfo: {
            lastUpdateTime: '',
            cpuCount: 0,
            cpuUsage: null,
            lastStartTime: '',
            lastUptime: 0,
            totalRAM: null,
            availableRAM: null,
            usedRAM: null,
            usedRAMPercent: null,
            harddiskInfoList: [{
                driveLetter: null,
                total: null,
                available: null,
                used: null
            }]
        },
        JVMInfo: {
            lastUpdateTime: '',
            threadsTotal: 0,
            threadsLive: 0,
            threadsDaemon: 0,
            threadsPeak: 0,
            clsCurrLoaded: 0,
            clsUnloaded: 0,
            clsTotalLoaded: 0
        }
    }
  },
  methods: {
      loadData1 () {
          let vm = this
          vm.$http.get('api/systemMonitor/findServerMonitorInfo').then(res => {
            if (res.data.code === 0){
              vm.serverMonitorInfo = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      loadData2 () {
          let vm = this
          vm.$http.get('api/systemMonitor/findJVMInfo').then(res => {
            if (res.data.code === 0){
              vm.JVMInfo = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      }
  },
  mounted() {
     let vm = this
     vm.loadData1()
     vm.loadData2()
  }
}
</script>
<style scoped>
.title {
    font-weight: bold;
    font-size: 17px;
}
</style>
